<template>
	<view class="Commodity">
		<!-- 单个商品组件 -->
		<view class="commodity-item">
			<image class="commodity-img" src="../../static/img/cut.png"></image>
			<view class="commodity-content">
				<text class="commodity-name">
					精品好物项目'App' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。
				</text>
				<view class="">
					<text class="price">$299</text>
				</view>
				<text class="discount">5.2折</text>
			</view>
		</view>
		<!-- <view class="commodity-item">
			<image class="commodity-img" src="../../static/img/cut.png"></image>
			<view class="commodity-content">
				<text class="commodity-name">
					精品好物项目'App' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。
				</text>
				<view class="">
					<text class="price">$299</text>
				</view>
				<text class="discount">5.2折</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		// props: ["commodity"],
		// mounted(){
		// 	console.log(33333444,this.commodity)
		// }
	}
</script>

<style>
	.Commodity{
		display: flex;
		flex-wrap: wrap;
	}
	.commodity-item{
		width: 375rpx;
		padding-bottom: 20rpx;
	}
	.commodity-img{
		width: 100%;
		height: 375rpx;
	}
	.commodity-content{
		text-align: center;
	}
	.commodity-name{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #3333333;
		word-break: break-all;
		padding: 6rpx 20rpx;
		
	}
	.discount{
		font-size: 24rpx;
		border-radius: 4rpx;
		border: 1px solid #FF3333;
		padding: 2rpx 10rpx;
		color: #FF3333;
	}
</style>